import React, { useState, useEffect } from "react";
import AddIntelligent_lighting from "./addIntelligent_lighting/AddIntelligent_lighting";
import Sbxq from "./Xq/Sbxq";
import Gjxq from "./Xq/Gjxq";
import Ywxq from "./Xq/Ywxq";
import http from "../../utils/http";
import store from "../../store";

import {
    Form,
    Input,
    Button,
    Table,
    Popconfirm,
    Space,
    Tabs,
    Select,
    Pagination,
} from "antd";
import "./addIntelligent_lighting/AddIntelligent_lighting.scss";

// import Search from "antd/lib/input/Search";
const { Option } = Select;

const { TabPane } = Tabs;

export default function Intelligent_lighting() {
    // 处理后端的时间戳
    function getLocalTime(n) {
        return new Date(parseInt(n)).toLocaleString().replace(/:\d{1,2}$/, " ");
    }

    // 获取设备信息数据
    const [shebeiData, setshebeiData] = useState([]);
    const showSb = (array) => {
        let arr = array.map((v) => {
            return {
                key: v.dinfId,
                ddetName: v.ddetName,
                ddetNumber: v.ddetNumber,
                ddetType: v.ddetType,
                dinfLocation: v.dinfLocation,
                dinfState: v.dinfState,
                dinfUpdate: getLocalTime(v.dinfUpdate),
                dinfRuntime: v.dinfRuntime,
            };
        });
        setshebeiData(arr);
    };
    useEffect(() => {
        http({
            url: "/device/deviceInformation",
            method: "post",
        }).then((res) => {
            if (res.code === 200) {
                showSb(res.data.deviceInformationVoList);
                store.qintianyong.Sbtotal = res.data.sum;
            }
        });
    }, []);
    const columns = [
        {
            title: "设备名称",
            dataIndex: "ddetName",
            render: (text) => <a>{text}</a>,
        },
        {
            title: "设备编号",
            dataIndex: "ddetNumber",
        },
        {
            title: "设备型号",
            dataIndex: "ddetType",
        },
        {
            title: "安装位置",
            dataIndex: "dinfLocation",
        },
        {
            title: "运行状态",
            dataIndex: "dinfState",
        },
        {
            title: "运行时间(天)",
            dataIndex: "dinfRuntime",
        },
        {
            title: "最近更新时间",
            dataIndex: "dinfUpdate",
        },
        // 表格后面的操作区域
        {
            title: "操作",
            dataIndex: "operation",
            render: (text, record) => (
                <Space size="middle">
                    <a
                        onClick={() => {
                            Sbxq1(text, record);
                        }}
                    >
                        详情
                    </a>
                    <Popconfirm
                        title="确定要删除吗?"
                        onConfirm={() => {
                            Sbconfirm(text, record);
                        }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    // 设备删除
    function Sbconfirm(a, b) {
        // console.log(b.key);
        let num = parseInt(b.key);
        // console.log(num);
        let arr = new Array();
        arr.push(num);
        // console.log(arr);
        http({
            url: "/device/deviceDelete",
            method: "post",
            data: arr,
        }).then((res) => {
            console.log(res);
            if (res.code === 200) {
                http({
                    url: "/device/deviceInformation",
                    method: "post",
                }).then((res) => {
                    if (res.code == 200) {
                        let arr = res.data.deviceInformationVoList.map((v) => {
                            return {
                                key: v.dinfId,
                                ddetName: v.ddetName,
                                ddetNumber: v.ddetNumber,
                                ddetType: v.ddetType,
                                dinfLocation: v.dinfLocation,
                                dinfState: v.dinfState,
                                dinfUpdate: getLocalTime(v.dinfUpdate),
                                dinfRuntime: v.dinfRuntime,
                            };
                        });
                        setshebeiData(arr);
                    }
                });
                // console.log(1);
                // // showSb(res.data.deviceInformationVoList);
                // showSb(res.data.deviceInformationVoList);
            }
        });
    }
    // 设备详情数据
    function Sbxq1(a, b) {
        store.qintianyong.Sbxq = b;
        setSbxq(true);
    }

    // 查询设备信息
    const Sbchaxun = () => {
        //获取表单的数据
        let Sbmc = form.getFieldsValue(true).Sbmc;
        let Sbbh = form.getFieldsValue(true).Sbbh;
        let Sbty = form.getFieldsValue(true).Sbty;
        console.log(Sbmc, Sbbh, Sbty);
        http({
            url: "/device/deviceInformation",
            method: "post",
            params: {
                ddetName: Sbmc ? Sbmc : "",
                ddetNumber: Sbbh ? Sbbh : "",
                dinfState: Sbty ? Sbty : "",
            },
        }).then((res) => {
            if (res.code === 200) {
                let Brr = res.data.deviceInformationVoList.map((v) => {
                    return {
                        key: v.dinfId,
                        ddetName: v.ddetName,
                        ddetNumber: v.ddetNumber,
                        ddetType: v.ddetType,
                        dinfLocation: v.dinfLocation,
                        dinfState: v.dinfState,
                        dinfUpdate: getLocalTime(v.dinfUpdate),
                        dinfRuntime: v.dinfRuntime,
                    };
                });
                setshebeiData(Brr);
                store.qintianyong.Sbtotal = res.data.sum;
                console.log(res.data.deviceInformationVoList);
            }
        });
    };
    // 设备重置数据
    const Sbchongzhi = () => {
        form.resetFields();
        // console.log(1);
        http({
            url: "/device/deviceInformation",
            params: {
                ddetName: "",
                ddetNumber: "",
                dinfState: "",
            },
            method: "post",
        }).then((res) => {
            console.log("重置数据", res.data);
            showSb(res.data.deviceInformationVoList);
            store.qintianyong.Sbtotal = res.data.sum;
        });
    };

    // 获取告警记录数据
    const [GjData, setGjData] = useState([]);
    useEffect(() => {
        http({
            url: "/warning/warningRecord",
            method: "post",
        }).then((res) => {
            if (res.code == 200) {
                let gjArr = res.data.warningVoList.map((v, i) => {
                    return {
                        key: v.wdetId,
                        ddetName: v.ddetName,
                        ddetNumber: v.ddetNumber,
                        dinfLocation: v.dinfLocation,
                        wrecContent: v.wrecContent,
                        wrecDate: getLocalTime(v.wrecDate),
                        wrecState: v.wrecState,
                        wrecTypestate: v.wrecTypestate,
                    };
                });
                setGjData(gjArr);
            }
            console.log("告警数据", res.data);
        });
    }, []);
    const gjcolumns = [
        {
            title: "设备名称",
            dataIndex: "ddetName",
            render: (text) => <a>{text}</a>,
        },
        {
            title: "设备编号",
            dataIndex: "ddetNumber",
        },
        {
            title: "告警位置",
            dataIndex: "dinfLocation",
        },
        {
            title: "告警内容",
            dataIndex: "wrecContent",
        },
        {
            title: "告警类型",
            dataIndex: "wrecTypestate",
        },

        {
            title: "处置状态",
            dataIndex: "wrecState",
        },
        {
            title: "告警时间",
            dataIndex: "wrecDate",
        },
        // 表格后面的操作区域
        {
            title: "操作",
            dataIndex: "operation",
            render: (text, record) => (
                <Space size="middle">
                    <a
                        onClick={() => {
                            shebei(text, record);
                        }}
                    >
                        详情
                    </a>
                    <Popconfirm
                        title="确定要删除吗?"
                        onConfirm={() => {
                            confirm(text, record);
                        }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];

    //获取运维信息数据
    const [YwData, setYwData] = useState([]);
    useEffect(() => {
        http({
            url: "/maintenance/maintenanceRecord",
            method: "post",
        }).then((res) => {
            if (res.code == 200) {
                let ywArr = res.data.maintenanceVoList.map((v, i) => {
                    return {
                        key: v.mrecId,
                        ddetName: v.ddetName,
                        ddetNumber: v.ddetNumber,
                        dinfLocation: v.dinfLocation,
                        mrecContent: v.mrecContent,
                        mrecMaintenancetype: v.mrecMaintenancetype,
                        mrecMaintenancestate: v.mrecMaintenancestate,
                        mrecDate: getLocalTime(v.mrecDate),
                    };
                });
                setYwData(ywArr);
            }
            console.log("运维数据", res.data);
        });
    }, []);
    const Ywcolumns = [
        {
            title: "设备名称",
            dataIndex: "ddetName",
            render: (text) => <a>{text}</a>,
        },
        {
            title: "设备编号",
            dataIndex: "ddetNumber",
        },
        {
            title: "巡检位置",
            dataIndex: "dinfLocation",
        },
        {
            title: "巡检内容",
            dataIndex: "mrecContent",
        },
        {
            title: "维修类型",
            dataIndex: "mrecMaintenancetype",
        },

        {
            title: "巡检状态",
            dataIndex: "mrecMaintenancestate",
        },
        {
            title: "巡检时间",
            dataIndex: "mrecDate",
        },
        // 表格后面的操作区域
        {
            title: "操作",
            dataIndex: "operation",
            render: (text, record) => (
                <Space size="middle">
                    <a
                        onClick={() => {
                            Yunwei(text, record);
                        }}
                    >
                        详情
                    </a>
                    <Popconfirm
                        title="确定要删除吗?"
                        onConfirm={() => {
                            confirm(text, record);
                        }}
                        onCancel={cancel}
                        okText="Yes"
                        cancelText="No"
                    >
                        <a href="#">删除</a>
                    </Popconfirm>
                </Space>
            ),
        },
    ];
    // 新增跳转
    const [isaddIntelligent_lighting, setaddIntelligent_lighting] =
        useState(false);
    const xinzeng = () => {
        setaddIntelligent_lighting(true);
    };
    // 设备详情跳转
    const [isSbxq, setSbxq] = useState(false);
    const openEditBox = () => {
        setSbxq(true);
    };
    // 告警详情
    const [isGjxq, setGjxq] = useState(false);
    const shebei = () => {
        setGjxq(true);
    };
    // 运维详情
    const [isYwxq, setYwxq] = useState(false);
    const Yunwei = () => {
        setYwxq(true);
    };
    //分页
    const pageChange = (page, size) => {
        console.log(page);
        store.qintianyong.Sbcurrent = page;
        http({
            url: "/device/deviceInformation",
            method: "post",
            params: {
                current: page,
                size: size,
            },
        }).then((res) => {
            if (res.code === 200) {
                showSb(res.data.deviceInformationVoList);
            }
        });
    };

    // 下来按钮的方法
    const handleChange = (value) => {
        // message.info("Click on menu item.");
        console.log(`selected ${value}`);
    };
    const callback = (key) => {
        console.log(key);
    };
    const [form] = Form.useForm();

    // 新增方法
    // const search = () => {
    //     setaddIntell(true);
    // };
    // 批量删除方法
    const resize = () => {
        console.log("批量删除方法");
    };

    // 查询方法
    const chaxun = () => {
        console.log("查询方法");
    };

    //重置方法
    const chongzhi = () => {
        console.log("重置方法");
    };

    // 操作里面的删除方法
    function cancel(e) {}
    function confirm(a, b) {}

    const rowSelection = {
        onChange: (selectedRowKeys, selectedRows) => {
            console.log(
                `selectedRowKeys: ${selectedRowKeys}`,
                "selectedRows: ",
                selectedRows
            );
        },
        getCheckboxProps: (record) => ({
            // disabled: record.name === 'Disabled User',
            // Column configuration not to be checked
            name: record.name,
        }),
    };
    // 判断跳转
    if (isaddIntelligent_lighting) {
        // 新增页面
        return (
            <div className="roleContent">
                <AddIntelligent_lighting
                    setaddIntelligent_lighting={setaddIntelligent_lighting}
                ></AddIntelligent_lighting>
            </div>
        );
    } else if (isSbxq) {
        return (
            <div className="roleContent">
                <Sbxq setSbxq={setSbxq}></Sbxq>
            </div>
        );
    } else if (isGjxq) {
        return (
            <div className="roleContent">
                <Gjxq setGjxq={setGjxq}></Gjxq>
            </div>
        );
    } else if (isYwxq) {
        return (
            <div className="roleContent">
                <Ywxq setYwxq={setYwxq}></Ywxq>
            </div>
        );
    }
    return (
        <div>
            <div className="roleContent">
                {/* 头部信息区域 */}
                <Form
                    form={form}
                    name="horizontal_login"
                    layout="inline"
                    className="title"
                >
                    <Form.Item name="username">
                        <div className="kuai">
                            <span></span>
                            <span>智能荷储管理</span>
                        </div>
                    </Form.Item>
                    <Form.Item className="btn">
                        <div>
                            <Button
                                className="cha"
                                type="primary"
                                onClick={xinzeng}
                            >
                                新增
                            </Button>
                            <Button
                                className="resize"
                                onClick={resize}
                                type="primary"
                            >
                                批量删除
                            </Button>
                        </div>
                    </Form.Item>
                </Form>
                {/* 选项卡区域 */}
                <Tabs
                    defaultActiveKey="1"
                    onChange={callback}
                    className="Source_network_Tabs"
                >
                    {/* 设备表格 */}
                    <TabPane tab="设备管理" key="1">
                        <div className="biao tbiao">
                            {/* 搜索筛选区域 */}
                            <Form
                                form={form}
                                name="horizontal_login"
                                layout="inline"
                                className="Role"
                            >
                                <Form.Item name="Sbmc" label="设备名称">
                                    <Input placeholder="请输入设备名称" />
                                </Form.Item>
                                <Form.Item name="Sbbh" label="设备编号">
                                    <Input placeholder="请输入设备编号" />
                                </Form.Item>
                                <Form.Item name="Sbty" label="运行状态">
                                    <Select
                                        style={{ width: 166.4 }}
                                        onChange={handleChange}
                                    >
                                        <Option value="请选择" disabled>
                                            请选择
                                        </Option>
                                        <Option value="正常">正常</Option>
                                        <Option value="禁用">禁用</Option>
                                        <Option value="异常">异常</Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item className="btn">
                                    <div>
                                        <Button
                                            className="cha"
                                            type="primary"
                                            onClick={Sbchaxun}
                                        >
                                            查询
                                        </Button>
                                        <Button
                                            className="resize"
                                            onClick={Sbchongzhi}
                                            type="primary"
                                        >
                                            重置
                                        </Button>
                                    </div>
                                </Form.Item>
                            </Form>
                            <Table
                                pagination={false}
                                className="table1"
                                rowSelection={{
                                    ...rowSelection,
                                }}
                                columns={columns}
                                dataSource={shebeiData}
                            />
                            <Pagination
                                defaultCurrent={1}
                                current={store.qintianyong.Sbcurrent}
                                total={store.qintianyong.Sbtotal}
                                onChange={pageChange}
                                style={{
                                    marginTop: " 20px",
                                    textAlign: "center",
                                }}
                            />
                        </div>
                    </TabPane>
                    {/* 告警表格 */}
                    <TabPane tab="告警记录" key="2">
                        <div className="biao tbiao">
                            {/* 搜索筛选区域 */}
                            <Form
                                form={form}
                                name="horizontal_login"
                                layout="inline"
                                className="Role"
                            >
                                <Form.Item name="username" label="设备名称">
                                    <Input placeholder="请输入设备名称" />
                                </Form.Item>
                                <Form.Item name="username" label="设备编号">
                                    <Input placeholder="请输入设备编号" />
                                </Form.Item>
                                <Form.Item name="username" label="告警类型">
                                    <Select
                                        defaultValue="请选择"
                                        style={{ width: 166.4 }}
                                        onChange={handleChange}
                                    >
                                        <Option value="请选择" disabled>
                                            请选择
                                        </Option>
                                        <Option value="设备故障">
                                            设备故障
                                        </Option>
                                        <Option value="告警事件">
                                            告警事件
                                        </Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item className="btn">
                                    <div>
                                        <Button
                                            className="cha"
                                            type="primary"
                                            onClick={chaxun}
                                        >
                                            查询
                                        </Button>
                                        <Button
                                            className="resize"
                                            onClick={chongzhi}
                                            type="primary"
                                        >
                                            重置
                                        </Button>
                                    </div>
                                </Form.Item>
                            </Form>
                            <Table
                                className="table1"
                                rowSelection={{
                                    ...rowSelection,
                                }}
                                columns={gjcolumns}
                                dataSource={GjData}
                            />
                        </div>
                    </TabPane>
                    {/* 运维表格 */}
                    <TabPane tab="运维记录" key="3">
                        <div className="biao tbiao">
                            {/* 搜索筛选区域 */}
                            <Form
                                form={form}
                                name="horizontal_login"
                                layout="inline"
                                className="Role"
                            >
                                <Form.Item name="username" label="设备名称">
                                    <Input placeholder="请输入设备名称" />
                                </Form.Item>
                                <Form.Item name="username" label="设备编号">
                                    <Input placeholder="请输入设备编号" />
                                </Form.Item>
                                <Form.Item name="username" label="维修记录">
                                    <Select
                                        defaultValue="请选择"
                                        style={{ width: 166.4 }}
                                        onChange={handleChange}
                                    >
                                        <Option value="请选择" disabled>
                                            请选择
                                        </Option>
                                        <Option value="故障检修">
                                            故障检修
                                        </Option>
                                        <Option value="日常巡查">
                                            日常巡查
                                        </Option>
                                    </Select>
                                </Form.Item>
                                <Form.Item className="btn">
                                    <div>
                                        <Button
                                            className="cha"
                                            type="primary"
                                            onClick={chaxun}
                                        >
                                            查询
                                        </Button>
                                        <Button
                                            className="resize"
                                            onClick={chongzhi}
                                            type="primary"
                                        >
                                            重置
                                        </Button>
                                    </div>
                                </Form.Item>
                            </Form>
                            <Table
                                className="table1"
                                rowSelection={{
                                    ...rowSelection,
                                }}
                                columns={Ywcolumns}
                                dataSource={YwData}
                            />
                        </div>
                    </TabPane>
                </Tabs>
            </div>
        </div>
    );
}
